<template>
  <div class="drive-form">
    <div class="group">
      <label>姓　　名</label>
      <div class="rbox">
        <input class="form-control" type="text" v-model="forms.userName" @blur="setTop" @click="codeSendAction('name1')">
      </div>
    </div>
    <div class="group">
      <label>电　　话</label>
      <div class="rbox">
        <input class="form-control" type="text" v-model="forms.phoneNbr" @blur="setTop" @click="codeSendAction('phone1')">
      </div>
    </div>
    <div class="group gender">
      <label></label>
      <div class="rbox gender-inline">
        <label class="radio-inline" v-bind:class="{active : forms.gender == 1}" @click="changeGender(1)">
          <input type="radio" name="sex" v-model="forms.gender" value="1">先生
        </label>
        <label class="radio-inline" v-bind:class="{active : forms.gender == 2}" @click="changeGender(2)">
          <input type="radio" name="sex" v-model="forms.gender" value="2">女士
        </label>
      </div>
    </div>
    <div class="group pick-car">
      <label>选择车辆</label>
      <div class="rbox">
        <select v-model="forms.carSeries" @blur="setTop" @change="changeCar" @click="codeSendAction('model1')">
          <option value="" disabled>请选择车系</option>
          <option v-for="item in carJson" :value="item.ID">{{item.Name}}</option>
        </select>
        <span class="icon icon-arrow-down"></span>
      </div>
    </div>
    <div class="group">
      <label>预约试驾</label>
      <div class="rbox position">
        <div class="w50" @click="codeSendAction('province1')">
          <select v-model="forms.province" @change="changeProvince" @blur="setTop">
            <option value="" disabled>请选择</option>
            <option v-for="item in provinceJson" :value="item.id">{{item.name}}</option>
          </select>
          <span class="icon icon-arrow-down"></span>
        </div>
        <div class="w50" @click="codeSendAction('city1')">
          <select v-model="forms.city" @change="changeCity" @blur="setTop">
            <option value="" disabled>请选择</option>
            <option v-for="item in cityJson[forms.province]" :value="item.id">{{item.name}}</option>
          </select>
          <span class="icon icon-arrow-down"></span>
        </div>
      </div>
    </div>
    <div class="group">
      <label>专营店</label>
      <div class="rbox">
        <select v-model="forms.dealer" @blur="setTop" @change="changeDealer" @click="codeSendAction('dealer1')">
          <option value="" disabled>请择专营店</option>
          <option v-for="item in dealerJson[forms.city]" :value="item.id">{{item.name}}</option>
        </select>
        <span class="icon icon-arrow-down"></span>
      </div>
    </div>
    <div class="group protocol">
      <label></label>
      <div class="rbox">
        <label class="radio-inline" v-bind:class="{active: protocol}" @click="changeProtocol()">我仔细阅读了并接受所附的</label>
        <span @click="showPolicy(true)">隐私条款</span>
      </div>
    </div>
    <div class="submit-btn" @click="submitBtn()">提交</div>
    <div class="policy_bg" v-bind:class="{active: policy_active}">
      <div class="policy_wrap">
        <div class="policy_content">
          <div class="tit">隐私条款</div>
          <div class="des" v-html="protection"></div>
        </div>
        <div class="policy_close icon icon-close1" @click="showPolicy(false)"></div>
      </div>
    </div>
  </div>
</template>

<script>
  import API from '@/api'
  import layer from "layui-layer";
  import '@/assets/style/font/iconfont/iconfont.css'

  export default {
    name: 'testDrive',
    data: function(){
      return {
        protection: "<p><strong>东风日产用户个人信息保护基本方针</strong></p><p>东风日产乘用车公司严格遵守个人信息保护相关的中国法律法规，妥善处理顾客个人信息，遵守维护国家网络信息安全、保护个人用户隐私信息是企业重要的社会责任。基于此，“东风日产乘用车公司”制定了如下的保护个人信息基本方针。 </p><p><strong>用户须知</strong></p><p>东风日产乘用车公司通过本网站（以下简称“网站”）将依据本隐私政策和相关国家法律规定收集、使用和披露用户个人信息，用户在浏览网站以及使用网站的特定服务之前，务必仔细阅读本隐私政策。用户一旦使用本网站，即表示用户理解并同意地接受本声明，用户应严格遵守本声明和相关法律的规定，如果用户不同意该申明或条款，则需停止浏览访问网站或停止提交相关服务功能申请。</p><p><strong>知识产权声明</strong></p><p>网站提供的内容或服务中包含的全部信息（包括但不限于任何文本、图片、音频、视频、数据、标识、数据编辑、商标）以及为提供服务而使用的任何软件均受知识产权和相关法律保护。用户不得以任何方式将网站信息用于其它商业用途。用户以个人和非商业目的使用网站内容或服务的情况除外。</p><p>本网站转载内容并不代表东风日产（包括东风日产关联企业）认同该观点或证实其内容的真实性。东风日产乘用车公司不对这些第三方的内容或者链接做出任何保证或承担任何责任，用户应对本网站提供的第三方内容或通往第三方网站的链接自行加以判断，并承担因使用而引起的所有风险。本网站对于第三方内容展示有在提醒或说明内容来源的义务。</p><p><strong>隐私声明</strong></p><p>用户浏览本网站的一般性内容时，不要求提供任何个人信息。用户使用或浏览网站的特定服务或信息时（例如试驾申请、联系本网、参与活动），在用户同意并确认的基础上，东风日产可能会以线上或线下注册表格的形式要求用户提供如下个人资料和信息：</p><ul><li>一般信息：性别、年龄、职业、出生日期、教育程度、收入状况、婚姻家庭状况、兴趣爱好；</li><li>联络信息：姓名、电子邮箱、电话号码、传真号码、手机号码、通讯地址；</li><li>敏感信息：在需要用户付费才能享有的服务或产品，或参加本网站参与或组织的活动类似特定情况下，东风日产会要求用户提供信用卡号码、银行卡号码、身份证或护照号码个人付款信息和身份证件信息。</li></ul><p>网站自动收集的信息。不管用户是否注册或登录，东风日产可能会自动收集浏览本网站的用户的如下信息：</p><ul><li>用户浏览器类型、操作系统类型、宽带类型、浏览器语言；</li><li>用户IP地址及该地址可能显示的用户地理位置；</li><li>用户在本网站内浏览过的页面、广告和链接；</li><li>用户访问本网站时发出的访问请求及其日期、时间和引荐网址（如有）；</li><li>通过Cookie标注用户的浏览器的唯一性和在本网站的账户信息（包括用户访问本网站的各项活动、浏览习惯、消费习惯、账户信息）；用户可以选择修改浏览器设置拒绝cookie，如果用户拒绝了cookie，此时用户可能无法使用依赖于cookie才能提供的本网站服务或功能；</li><li>东风日产可能会使用浏览器网络存储（包括 HTML 5）和应用程序数据缓存等机制，在用户设备上收集和存储用户所浏览过的网页信息；用户可自主选择拒绝；</li><li>当用户使用本网站提供的具有定位功能的服务时，东风日产可能会收集并处理有关用户实际所在位置的信息，还可能使用其它技术进行定位。</li></ul><p>我们会采取合理可行的措施，避免收集无关的个人信息。<b>我们只会在达成本政策所述目的所需的期限内保留您的个人信息，除非法律有强制的存留要求</b>，例如《中华人民共和国电子商务法》要求商品和服务信息、交易信息保存时间自交易完成之日起不少于三年。而我们判断前述期限的标准包括：</p><ul><li>1、完成与您相关的交易目的、维护相应交易及业务记录、应对您可能的查询或投诉；</li><li>2、保证我们为您提供服务的安全和质量；</li><li>3、您是否同意更长的留存期间；</li><li>4、是否存在保留期限的其他特别约定。</li></ul><p style='text-decoration: underline;'><b>在您的个人信息超出保留期间后，我们会根据适用法律的要求删除您的个人信息，或使其匿名化处理。</b></p><br><p><strong>我们如何使用Cookie</strong></p><p>为确保网站正常运转、为您获得更轻松的访问体验、向您推荐您可能感兴趣的内容，我们会在您的计算机或移动设备上存储Cookie、Flash Cookie，或浏览器（或关联应用程序）提供的其他通常包含标识符、站点名称以及一些号码和字符的本地存储（统称“Cookie”）。您可以通过浏览器的设置功能，选择“不接受「Cookies」”的选项，防止「Cookies」储存在您的计算机上。要查明「Cookies」是如何在您的计算机上工作，请参阅浏览器制造商的说明。</p><br><p><strong>信息的使用</strong></p>1）关于个人信息的使用东风日产乘用车公司取得的个人信息，在符合国家相关法律法规条件下，企业正常经营及运营管理目的下使用：<ol><li>1.与顾客进行的交易；</li><li>2.根据用户的要求向用户提供特定服务、产品或信息；</li><li>3.授权用户参加一项活动，例如线下活动招募、网上论坛或优惠抽奖等；</li><li>4.商品及服务的企划、开发、改善；</li><li>5.为改进网站的服务分析用户对本网站的使用方式和使用习惯；</li><li>6.发送与“东风日产”的产品、服务、宣传活动（包括但不限于汽车、保险等）相关的信息或通知；但用户有权拒绝该商业或服务信息的推送；</li><li>7.提高服务质量及顾客满意度等方面，实施的各项调查；</li><li>8.顾客问询、联系“东风日产经销商”及东风日产顾客服务中心时，进行迅速的对应；</li><li>9.根据法律规定或政府机关、法院、调解机构、仲裁机构等的通知、指导等而采取的对应；</li><li>10.其他取得个人信息时所明示的使用目的。</li></ol>2）向第三方提供个人信息东风日产使用安全制度、安全技术和其他措施防止用户的个人资料丢失、被盗用或遭篡改。个人信息不会用于未经同意或者说明的其他用途向第三方披露。用户理解并同意条件下，我方向第三方分享个人信息。<ol><li>1.取得用户同意后，东风日产与第三方商业伙伴分享用户的个人信息；</li><li>2.第三方合作伙伴在用户通过网站申请参加线上或线下活动，用户的个人信息可能会提供给相关第三方。</li><li>3.获得用户同意后，授权登录其他第三方业务系统、数字平台时，可能会将用户识别信息披露第三方；</li></ol>3）妥善管理个人信息<p>东风日产承诺会使用各种信息安全制度、安全技术和程序措施来尽量保护用户的个人信息不被未经授权地访问、使用或泄露。</p><p><strong>信息使用范围</strong></p><p>用户同意东风日产乘用车公司可以通过以下方式对个人信息进行使用和披露（包含对于个人信息的存储和处理）：</p><ol><li>1.我们（包含东风日产及分支机构、经销商、网上商城、自营自媒体平台、其他数字服务平台等）自行使用；</li><li>2.我们向关联公司（包括但不限于东风日产乘用车附属公司、控股公司、多层级母公司、多层级子公司、联营公司、广告代理公司等）披露并由其使用；</li><li>3.我们向相关东风日产特约店披露并由其使用；</li><li>4.我们及关联公司及相关东风日产特约店为满足您的需求，通过您提供的信息与您联系；</li><li>5.我们及关联公司及相关东风日产特约店会定期或不定期向您发送有关产品、服务或相关活动的信息并在推送时标明定向推送。</li></ol><p>您同意免除上述个人信息的接收和/或使用方在按照本法律声明所述情形下进行信息披露和使用而导致的或可能导致的所有索赔、责任和损失。</p><p><strong>我们的授权合作伙伴包括以下类型：</strong></p><p>1. 广告、分析服务类的授权合作伙伴。除非得到您的许可，否则我们不会将您的个人身份信息与提供广告、分析服务的合作伙伴共享。我们会委托这些合作伙伴处理与广告覆盖面和有效性相关的信息，但不会提供您的个人身份信息，或者我们将这些信息进行去标识化处理，以便它不会识别您个人。这类合作伙伴可能将上述信息与他们合法获取的其他数据相结合，以执行我们委托的广告服务或决策建议。2. 供应商、服务提供商和其他合作伙伴。我们将信息发送给支持我们业务的供应商、服务提供商和其他合作伙伴，这些支持包括受我们委托提供的技术基础设施服务、分析我们服务的使用方式、衡量广告和服务的有效性、提供客户服务、支付便利或进行学术研究和调查。我们会对授权合作伙伴获取有关信息的应用程序接口（API）、软件工具开发包（SDK）进行严格的安全检测，并与授权合作伙伴约定严格的数据保护措施，令其按照我们的委托目的、服务说明、本隐私权政策以及其他任何相关的保密和安全措施来处理个人信息。\</p><p><strong>用户发布的信息</strong></p><p>本网站的部分服务中，用户有权在遵守本网站申明的前提下，发布自己的信息、视频、照片、观点、评论、商品使用体验、商品讨论等，该等内容自发布之时起成为公开信息，同时，用户在本网站发布信息的行为即视为允许本网站对该等信息无偿拥有使用权和完全再许可的权利，且该等权利不受适用范围、任何时间和空间的限制，用户应于发布联系信息、财务信息或其他个人信息之前自行谨慎判断。用户发布上述内容使之成为公开信息后，东风日产对其风险概不负责。用户发布信息须符合国家互联网相关法律法规要求、内容文明健康、符合道德伦理、发布信息真实等基本要求，东风日产基于网站运营管理有权公开、屏蔽、删除用户发布信息，有权冻结用户服务账户而不必额外通知用户。</p><p><strong>未成年人的信息保护</strong></p><p>如您为未成年人，建议请您的父母或监护人阅读本政策，并在征得您父母或监护人同意的前提下使用我们的服务或向我们提供您的信息。如您为未成年人的父母或监护人，当您对您所监护的未成年人的信息处理存在疑问时，请通过下文中客服中心的联系方式联系我们。<br>根据《儿童个人信息网络保护规定》，如监护人要求删除儿童个人信息，可以通过下文中客服中心的联系方式联系我们，系统后台在收到监护人要求后进行信息删除。</p><p><strong>问询、访问、更正、删除、撤回、注销账户</strong></p><p>关于个人信息的相关问询、访问、更正、删除、撤回、注销账户，请联系东风日产客服中心。如您发现我们收集、使用您个人信息的行为，违反了法律法规规定或违反了与您的约定，您可以要求我们删除相应的信息。如您发现我们收集、存储的您的个人信息有错误的，您也可以要求我们更正。当您符合约定的账户注销条件并注销账户后，您该账户内的所有信息将被清空，我们将不会再收集、使用或对外提供与该账户相关的个人信息，但您在使用网站期间提供或产生的信息我们仍需按照监管要求的时间进行保存，且在该保存的时间内依法配合有权机关的查询。“东风日产”将严格遵守个人信息保护相关的中国法律法规，进行妥善处理。</p><p><strong>东风日产客服中心</strong></p><p>【电话：800-830-8899，400-830-8899】\</p><p><strong>遵纪守法与改善以及更新与通知\</strong></p><p>“东风日产”将严格遵守个人信息保护相关的中国法律法规，并为了妥善处理个人信息而进行持续性的改善，并会将改善内容随时体现在本基本方针中，由于产品和服务的变化，申明的版本和内容也需不断更新，请用户注意并理解内容的更新。</p><p><strong>数据安全责任人\</strong></p><p>我们努力为用户的信息安全提供保障，以防止信息的丢失，不当使用、未经授权访问或批露；我们建立专门的管理制度、流程和组织以保障数据安全；东风日产数据安全反馈邮箱customercare@dfl.com.cn，联系电话400-830-8899。</p>",
        carJson: [{"ID": "51","Name": "第七代天籁",},{"ID": "13","Name": "第14代轩逸",},{"ID": "14","Name": "蓝鸟",},{"ID": "16","Name": "新轩逸·经典",},{"ID": "6","Name": "骐达TIIDA",},{"ID": "40","Name": "全新劲客",},{"ID": "21","Name": "全新奇骏",},{"ID": "22","Name": "全新逍客",},{"ID": "23","Name": "新楼兰",},{"ID": "48","Name": "全新途达",},{"ID": "49","Name": "轩逸·纯电",}],
        provinceJson: [{	"id": 12,	"name": "安徽"}, {	"id": 13,	"name": "福建"},{	"id": 28,	"name": "甘肃"}, {	"id": 19,	"name": "广东"}, {	"id": 20,	"name": "广西"},{	"id": 3,	"name": "河北"},{	"id": 8,	"name": "黑龙江"},{	"id": 10,	"name": "江苏"},{	"id": 5,	"name": "内蒙古"},{	"id": 29,	"name": "青海"},{	"id": 15,	"name": "山东"},{	"id": 27,	"name": "陕西"},{	"id": 2,	"name": "天津"},{	"id": 11,	"name": "浙江"}],
        cityJson: {	"12": [{		"id": 186,		"name": "合肥"	}],	"13": [{		"id": 203,		"name": "福州"	}, {		"id": 207,		"name": "泉州"	}],	"28": [{		"id": 448,		"name": "兰州"	}],	"19": [{		"id": 291,		"name": "深圳"	}, {		"id": 294,		"name": "佛山"	}, {		"id": 299,		"name": "惠州"	}, {		"id": 305,		"name": "东莞"	}],	"20": [{		"id": 312,		"name": "桂林"	}],	"3": [{		"id": 73,		"name": "石家庄"	}, {		"id": 83,		"name": "沧州"	}],	"8": [{		"id": 131,		"name": "齐齐哈尔"	}],	"10": [{		"id": 162,		"name": "南京"	}, {		"id": 165,		"name": "常州"	}, {		"id": 166,		"name": "苏州"	}, {		"id": 167,		"name": "南通"	}, {		"id": 173,		"name": "泰州"	}],	"5": [{		"id": 95,		"name": "呼和浩特"	}, {		"id": 98,		"name": "赤峰"	}],	"29": [{		"id": 462,		"name": "西宁"	}],	"15": [{		"id": 225,		"name": "淄博"	}, {		"id": 229,		"name": "潍坊"	}],	"27": [{		"id": 438,		"name": "西安"	}],	"2": [{		"id": 40,		"name": "天津"	}],	"11": [{		"id": 175,		"name": "杭州"	}, {		"id": 180,		"name": "绍兴"	}]},
        dealerJson: {"36":[],"39":[],"40":[{"id":2615,"name":"天津浩物武清","address":"天津市武清区下朱庄街京津公路南北辛庄桥西侧天津市名路翔汽车销售有限公司","tel":"022-29500099"},{"id":2869,"name":"天津津日","address":"卫国道128号（顺驰桥旁）","tel":"022-24141953"},{"id":2877,"name":"天津新骏濠","address":"卫津南路友谊食品厂院内","tel":"022-23930999/022-23932999"},{"id":2914,"name":"天津名濠","address":"普济河东道一号","tel":"022-26316222"},{"id":2947,"name":"天津新濠","address":"天津市东丽开发区一纬路四号","tel":"022-24982929"},{"id":3052,"name":"天津长江","address":"长江道92号","tel":"022-27033005"},{"id":3338,"name":"天津名宣","address":"汽车园南路25号","tel":"022-58919191"},{"id":3368,"name":"天津名达","address":"高新技术产业园储源道3号","tel":"022-58226155"},{"id":3836,"name":"天津津福行","address":"西青道汽车城内","tel":"022-87950111"}],"62":[],"73":[{"id":3492,"name":"石家庄东风南方联德","address":"南二环西路298号（石家庄南二环与石铜路交叉口西行500米路南）","tel":"0311-67699668"},{"id":3604,"name":"石家庄中升海悦","address":"北二环东路河北国际汽车贸易园区内","tel":"0311-85669996"},{"id":3661,"name":"石家庄中升新通","address":"北二环西路298号","tel":"0311-68002600"},{"id":3859,"name":"石家庄中升大通","address":"胜利北街与翠平路交口北行100路西","tel":"0311-89893557"}],"74":[],"75":[],"76":[],"77":[],"78":[],"79":[],"80":[],"81":[],"82":[],"83":[{"id":2983,"name":"沧州东风南方沧运","address":"新华西路85号","tel":"0317-2150660"},{"id":2998,"name":"沧州佳鑫","address":"渤海路韩家场村北","tel":"0317-2069886"},{"id":3277,"name":"沧州瑞鑫","address":"石港路与沧盐路交叉口中石油加油站东侧","tel":"0317-3584321"}],"84":[],"85":[],"86":[],"87":[],"88":[],"89":[],"90":[],"91":[],"92":[],"93":[],"94":[],"95":[{"id":3016,"name":"呼和浩特鼎杰","address":"兴安北路42号","tel":"0471-3381355"},{"id":3282,"name":"呼和浩特鼎泽","address":"南二环西段紫维汽车城","tel":"0471-8904333"},{"id":3430,"name":"呼和浩特利丰泰津","address":"海西路利丰汽车文化广场","tel":"15849112989"}],"96":[],"97":[],"98":[{"id":2620,"name":"赤峰金鹏","address":"新城区和美建材城西段（K99、66、37路公交终点站）","tel":"0476-2788088"},{"id":2968,"name":"赤峰世鹏","address":"桥北物流园区赤锡路108号东风日产世鹏专营店","tel":"0476-8773266"}],"99":[],"100":[],"101":[],"102":[],"103":[],"104":[],"105":[],"107":[],"108":[],"109":[],"110":[],"111":[],"112":[],"113":[],"114":[],"115":[],"116":[],"117":[],"118":[],"119":[],"120":[],"121":[],"122":[],"123":[],"124":[],"125":[],"126":[],"127":[],"128":[],"129":[],"130":[],"131":[{"id":2626,"name":"齐齐哈尔华宇瑞通","address":"联通大道301-2号","tel":"0452-2383232"},{"id":3260,"name":"齐齐哈尔瑞迪","address":"明海公路6号","tel":"0452-8888766"}],"132":[],"133":[],"134":[],"135":[],"137":[],"138":[],"139":[],"140":[],"141":[],"142":[],"162":[{"id":2955,"name":"南京汉虹","address":"幕府东路228号","tel":"025-85336789"},{"id":2997,"name":"南京文华","address":"双龙大道918号","tel":"025-66629901"},{"id":3059,"name":"南京华星","address":"红花街道大明路274号","tel":"025-52608822"},{"id":3437,"name":"南京福宁","address":"尧新大道92号","tel":"025-82265900"}],"163":[],"164":[],"165":[{"id":3096,"name":"常州中天","address":"通江南路266号","tel":"0519-85202118"},{"id":3133,"name":"常州中天日新","address":"湖塘永胜路8号","tel":"0519-86526001"},{"id":3394,"name":"常州中天日晟","address":"棕榈路29号","tel":"0519-81665199"}],"166":[{"id":2891,"name":"苏州华达","address":"高新国际汽车城广达路5号","tel":"0512-66672699"},{"id":2898,"name":"苏州风顺","address":"吴中区东环南路1268号（华东装饰城往南1公里）","tel":"0512-67601059"},{"id":2934,"name":"苏州伟海","address":"木渎镇中山东路136号","tel":"0512-66365799"},{"id":3264,"name":"苏州相诚","address":"元和街道太阳路2959号","tel":"0512-88185666"},{"id":3475,"name":"苏州诚品甪直","address":"苏州园区金鸡湖大道甪直汽车城","tel":"0512-66020555"},{"id":3887,"name":"苏州园区","address":"工业园区苏虹中路399号","tel":"0512-62967199"}],"167":[{"id":2768,"name":"南通太平洋开发区","address":"星湖大道北、东方国际汽车城内（竹行高速出口）","tel":"0513-85356222"},{"id":3008,"name":"南通太平洋","address":"城港路136号","tel":"0513-85609955"},{"id":3317,"name":"南通名尼威","address":"青年中路东延段北车管所西侧","tel":"0513-85409999"}],"168":[],"169":[],"170":[],"171":[],"172":[],"173":[{"id":3074,"name":"泰州东风南方天辰","address":"泰高路289号","tel":"0523-86999000"}],"174":[],"175":[{"id":2961,"name":"杭州元通城北","address":"花园岗街201号","tel":"0571-88290999"},{"id":2996,"name":"杭州东风南方杭城","address":"东教路629号（与石祥路交叉口往南200米）","tel":"0571-88015999"},{"id":3007,"name":"杭州东风南方通惠","address":"萧山通惠南路1265号","tel":"0571-22803333"},{"id":3095,"name":"杭州元通友通","address":"艮山东路200号","tel":"0571-86012323"},{"id":3132,"name":"杭州元通港昌","address":"天目山路325号","tel":"0571-87969111/0571-87996338"},{"id":3353,"name":"杭州东风南方滨安","address":"滨康路55号和风情大道交叉口","tel":"0571-83718833"},{"id":3445,"name":"杭州东风南方宁新","address":"通惠北路1218号","tel":"0571-83529555"}],"176":[],"177":[],"178":[],"179":[],"180":[{"id":3265,"name":"绍兴广成东成","address":"灵芝镇水产村","tel":"0575-88006333"}],"181":[],"182":[],"183":[],"184":[],"185":[],"186":[{"id":2593,"name":"合肥恒信东顺合肥北","address":"蒙城北路1111号","tel":"0551-65508399"},{"id":2946,"name":"合肥风之星","address":"安徽省合肥市瑶海区安徽国际汽车城G座/包公大道与大众路交口","tel":"0551-64253080"},{"id":2986,"name":"合肥伟业","address":"长江西路1068号安徽名车广场内第二排（奥迪正后方）","tel":"0551-63523999"},{"id":3222,"name":"合肥伟盛行","address":"纬二路12号","tel":"0551-63875599"}],"187":[],"188":[],"189":[],"190":[],"191":[],"192":[],"193":[],"194":[],"195":[],"196":[],"197":[],"199":[],"200":[],"201":[],"202":[],"203":[{"id":2737,"name":"福州汇京金山","address":"建新北路146号","tel":"0591-38291999"},{"id":2784,"name":"福州汇京福飞北","address":"龙头路","tel":"0591-28065999"},{"id":2875,"name":"福州中升福新","address":"晋安福兴投资区福新东路478号（盛丰大厦旁）","tel":"0591-83673852"},{"id":2910,"name":"福州中升福瑞","address":"后坂盖山投资区高旺路8号","tel":"0591-83539071/0591-83539562"},{"id":2944,"name":"福州中升福裕","address":"福峡路755号","tel":"0591-88527777"}],"204":[],"205":[],"206":[],"207":[{"id":2782,"name":"泉州汇京亿利","address":"新塘街道上郭社区新侨中学对面","tel":"0595-36000002"},{"id":2981,"name":"晋江汇京豪信","address":"罗山街道办事处缺塘村新区19-09号地块","tel":"0595-88155119"},{"id":3049,"name":"泉州汇京银河","address":"福厦路、吉泰路交叉口（奥林匹克花园斜）","tel":"0595-86730820"},{"id":3084,"name":"泉州汇京亿兴","address":"城东老火车站对面（华大方向）","tel":"0595-86732999"}],"208":[],"209":[],"210":[],"211":[],"212":[],"213":[],"214":[],"215":[],"216":[],"217":[],"218":[],"219":[],"220":[],"221":[],"222":[],"223":[],"224":[],"225":[{"id":2980,"name":"淄博泰通","address":"中心路253号","tel":"0533-3593222"},{"id":3048,"name":"淄博泰达","address":"山泉路68号","tel":"0533-2717666"},{"id":3381,"name":"淄博锦诚","address":"309国道周村南段山东巨能国际机床公司西侧","tel":"0533-6067333"},{"id":3477,"name":"淄博天兴","address":"淄川区双杨镇杨寨村东张博路西（杨寨建材城正对面）","tel":"0533-7909922"}],"226":[],"227":[],"228":[],"229":[{"id":2720,"name":"寿光华神鼎泰","address":"文家街道文家庄村南","tel":"0536-5508110"},{"id":3321,"name":"潍坊珠峰青州","address":"玲珑山北路3666号","tel":"0536-6132886"}],"230":[],"231":[],"232":[],"233":[],"234":[],"235":[],"236":[],"237":[],"238":[],"239":[],"240":[],"241":[],"242":[],"243":[],"244":[],"245":[],"246":[],"247":[],"248":[],"249":[],"250":[],"251":[],"252":[],"253":[],"254":[],"255":[],"256":[],"257":[],"258":[],"259":[],"260":[],"261":[],"262":[],"263":[],"264":[],"265":[],"266":[],"267":[],"268":[],"269":[],"270":[],"271":[],"272":[],"273":[],"275":[],"276":[],"277":[],"278":[],"279":[],"280":[],"281":[],"282":[],"283":[],"284":[],"285":[],"286":[],"287":[],"288":[],"289":[],"290":[],"291":[{"id":3145,"name":"深圳裕朋","address":"北环大道7028号","tel":"0755-88316536"},{"id":3178,"name":"深圳东风南方华鹏","address":"深圳市罗湖区清水河三路博丰大厦裙楼四楼","tel":"0755-82378000"},{"id":3180,"name":"深圳东风南方华翔","address":"龙岗中心城如意路（龙城街道办旁）","tel":"0755-89628098"},{"id":3184,"name":"深圳东风南方华旭","address":"白石路桂庙新村118号","tel":"0755-86112500"},{"id":3185,"name":"深圳东风南方华瑞","address":"深南大道6068号联合华鹏汽车交易广场C1-2","tel":"0755-83052068"},{"id":3191,"name":"深圳新大兴","address":"沙井街道西环路2111号  （518104）","tel":"0755-27283333"}],"292":[],"293":[],"294":[{"id":2890,"name":"佛山吉泰","address":"南庄镇吉利大道西吉利工业园利源一路1号","tel":"0757-85381616"},{"id":3197,"name":"佛山利隆","address":"西南街石湖洲村民委员会“下三津”","tel":"0757-87789199"},{"id":3267,"name":"佛山禅车城","address":"佛山大道中83号佛山（国际）车城北区七座","tel":"0757-82782380"},{"id":3447,"name":"顺德金桂","address":"容桂镇海尾社区广胜一街8号","tel":"0757-29812588"}],"295":[],"296":[],"297":[],"298":[],"299":[{"id":2882,"name":"惠州永惠","address":"水口镇大湖溪桥西南侧","tel":"0752-2318555"},{"id":2952,"name":"惠州天马","address":"三环路与口岸路交接处（实验中学旁）","tel":"0752-2271777"},{"id":3005,"name":"惠州俊通","address":"江北金龙大道51号","tel":"0752-2812333"},{"id":3391,"name":"惠州南菱君达","address":"三栋镇惠南汽车城君达日产4S店","tel":"0752-7777706"}],"300":[],"301":[],"302":[],"303":[],"304":[],"305":[{"id":2612,"name":"东莞东风南方振安","address":"长安镇乌纱蔡屋振荣路2号A","tel":"0769-89391966"},{"id":3159,"name":"东莞东风南方莞太","address":"莞太路白马路段376号（骏马山庄对面）","tel":"0769-22985906"},{"id":3168,"name":"东莞东风南方莞樟","address":"寮步镇莞樟路富竹山路段","tel":"0769-83523025"},{"id":3169,"name":"东莞东风南方东益","address":"莞太大道虎门镇白沙村5组路段317号","tel":"0769-85199988"},{"id":3196,"name":"东莞东风南方东兴","address":"厚街镇三屯村莞太路三屯路段 ","tel":"0769-85038606"}],"306":[],"307":[],"308":[],"309":[],"310":[],"311":[],"312":[{"id":3078,"name":"桂林友爱","address":"灵川八里街工业园区29-2-1号","tel":"0773-2638588"},{"id":3450,"name":"桂林真龙大成","address":"临桂机场路真龙汽车博览园　(临桂车管所旁)","tel":"0773-5585988"}],"313":[],"314":[],"315":[],"316":[],"317":[],"318":[],"319":[],"320":[],"321":[],"322":[],"323":[],"324":[],"325":[],"327":[],"328":[],"330":[],"331":[],"385":[],"386":[],"387":[],"388":[],"389":[],"390":[],"391":[],"392":[],"393":[],"394":[],"395":[],"396":[],"397":[],"398":[],"399":[],"400":[],"401":[],"402":[],"405":[],"406":[],"407":[],"408":[],"409":[],"410":[],"411":[],"412":[],"413":[],"414":[],"415":[],"416":[],"417":[],"418":[],"419":[],"420":[],"423":[],"424":[],"425":[],"426":[],"427":[],"428":[],"431":[],"438":[{"id":2738,"name":"西安英和幸福","address":"等驾坡幸福南路2号","tel":"029-82010500"},{"id":3047,"name":"西安佳益","address":"沣惠南路26号","tel":"029-82302345"},{"id":3118,"name":"西安忠伟","address":"北郊经济技术开发区凤城五路60号","tel":"029-86239111"},{"id":3227,"name":"西安英和三桥","address":"三桥镇天台路98号（西部车城向南800米）","tel":"029-89113969"},{"id":3316,"name":"西安佳泰","address":"通塬路1680号浐灞生态汽车城17号","tel":"029-83458899"},{"id":3844,"name":"西安汇德星","address":"西三环与望城一路交汇处","tel":"029-89635999"}],"439":[],"440":[],"441":[],"442":[],"443":[],"444":[],"445":[],"446":[],"448":[{"id":2917,"name":"兰州良志","address":"天水北路3019号","tel":"0931-8503390"},{"id":2951,"name":"兰州鑫通","address":"北龙口永新化工园区路口","tel":"0931-2353777"},{"id":3393,"name":"兰州泰华","address":"环形东路296号","tel":"0931-2144999"}],"449":[],"450":[],"451":[],"452":[],"453":[],"454":[],"455":[],"456":[],"457":[],"458":[],"460":[],"462":[{"id":2992,"name":"西宁青鹏","address":"城北区生物科技产业园海湖大道24号","tel":"0971-5316222"},{"id":3392,"name":"西宁嘉运","address":"兴川路6号","tel":"0971-5191662"}],"469":[],"470":[],"472":[],"473":[],"475":[],"476":[],"477":[],"478":[],"479":[],"480":[],"481":[],"482":[],"484":[],"485":[],"486":[],"487":[],"489":[],"5025":[]},
        protocol: false,
        policy_active: false,
        forms: {
          userName: '',
          phoneNbr: '',
          gender: 1,
          carSeries: '',
          province: '',
          city: '',
          dealer: ''
        }
      }
    },
    components: {
      layer
    },
    props: {

    },
    computed: {

    },
    methods: {
      showPolicy(status){
        this.policy_active = status
        try{
          _ha("send","action", "privacy1");
        }catch (e) {}
      },
      changeGender(type){
        this.forms.gender = type
        try{
          _ha("send","action", "gender" + type);
        }catch (e) {}
      },
      changeCar(val){
        try{
          this.carJson.forEach((item, index) => {
            if(item.ID == val.target.value){
              _ha("send","action","model1",{
                "model2": item.Name
              })
            }
          });
        }catch (e) {}
      },
      changeProvince(val){
        this.forms.city = ''
        this.forms.dealer = ''
        try{
          this.provinceJson.forEach((item, index) => {
            if(item.id == val.target.value){
              _ha("send","action","province1",{
                "province2": item.name
              })
            }
          });
        }catch (e) {}
      },
      changeCity(val){
        this.forms.dealer = ''
        try{
          this.cityJson[this.forms.province].forEach((item, index) => {
            if(item.id == val.target.value){
              _ha("send","action","city1",{
                "city2": item.name
              })
            }
          })
        }catch (e) {}
      },
      changeDealer(val){
        try{
          this.dealerJson[this.forms.city].forEach((item, index) => {
            if(item.id == val.target.value){
              _ha("send","action","dealer1",{
                "dealer2": item.name
              })
            }
          })
        }catch (e) {}
      },
      setTop(){
        $("html,body").scrollTop(0)
      },
      changeProtocol(){
        this.protocol = !this.protocol
        try{
          _ha("send","action", "agree1");
        }catch (e) {}
      },
      codeSendAction(value){
        try{
          _ha("send","action", value);
        }catch (e) {}
      },
      submitBtn(){
        let cookieID = null;
        if (this.$global.cookie.get("sc_ext_contact")) {
          let GLOBAL_COOKIE = this.$global.cookie.get("sc_ext_contact");
          let cookieArr = GLOBAL_COOKIE.split('|');
          cookieID = cookieArr[0]
        }

        //clueURL编码
        let clueURL = document.referrer ? document.referrer : window.location.href;
        let clueArr = clueURL.split("?");
        let clueURL_full = "";
        // 链接如果没有"?"
        if (clueArr.length <= 1) {
          let wellNum = window.location.hash.split("#");
          if (wellNum.length <= 1) {
            clueURL_full = clueURL
          } else {
            let urlHref = window.location.href;
            urlHref = urlHref.split("#");
            clueURL_full = urlHref[0] + "%23" + encodeURIComponent(urlHref[1])
          }
        } else { //参数"?"前面有"#"要编码
          clueURL_full = clueArr[0].replace("#", "%23") + "?" + encodeURIComponent(clueArr[1])
        }

        let params = {
          clueType: "3",
          siteName: "nissan",
          cluePageID: "1",
          smartCode: this.$global.cookie.get("SMARTCODE"),
          clueURL: clueURL_full,
          terminalCode: 1,
          clueName: "东风日产十一车展",
          departmentID: "6d9d2c92d9f446bbafeca99ef72cf2c0",
          departmentName: "市场部",
          subDepartmentName: "车型科",
          duration: "6",
          CampaignID: "312383b3-fda4-422f-a98b-aba899af79aa",
          cookieID: cookieID
        }

        this.forms = $.extend(this.forms, params);
        let forms = this.forms, msg = '';

        if (!forms.carSeries) {
          msg = '请选择心仪车型！'
        } else if (!forms.province || !forms.city || !forms.dealer) {
          msg = '请选择专营店！'
        } else if (!forms.userName) {
          msg = '请输入名字！'
        } else if (!this.$global.rex.username.test(forms.userName)) {
          msg = '姓名只能输入中文、字母和数字！'
        } else if (!forms.phoneNbr) {
          msg = '请输入电话号码！'
        } else if (!this.$global.rex.mobile.test(forms.phoneNbr)) {
          msg = '请输入正确的电话号码！'
        } else if (!this.protocol) {
          msg = '请阅读隐私条款！'
        }

        try {
          if(_ha){
            let ha_province = '', ha_city = '', ha_dealer = '', ha_car = '';
            this.provinceJson.forEach((item, index) => {
              if(item.id == forms.province){
                ha_province = item.name
              }
            });
            this.cityJson[forms.province].forEach((item, index) => {
              if(item.id == forms.city){
                ha_city = item.name
              }
            })
            this.dealerJson[forms.city].forEach((item, index) => {
              if(item.id == forms.dealer){
                ha_dealer = item.name
              }
            })
            this.carJson.forEach((item, index) => {
              if(item.ID == forms.carSeries){
                ha_car = item.Name
              }
            });
            let list = {
              name1: forms.userName,
              phone1: forms.phoneNbr,
              gender1: forms.gender == 2 ? '女' : '男',
              province1: ha_province,
              city1: ha_city,
              dealer1: ha_dealer,
              model1: ha_car
            }

            _ha("send", "action", "cardrive_btn", {
              name1: forms.userName,
              phone1: forms.phoneNbr,
              gender1: forms.gender == 2 ? '女' : '男',
              province1: ha_province,
              city1: ha_city,
              dealer1: ha_dealer,
              model1: ha_car
            });
          }
        }catch (e) {}

        if (msg) {
          layer.closeAll()
          layer.alert(msg)
          return
        }
        API.SaveClue(forms).then((res)=>{
          if (res.success) {
            layer.alert('预约成功！')
          }
        })
      }
    },
    created(){
      let _this = this;

    }
  }
</script>

<style lang="scss">
  button,input,label,span,div{ -webkit-tap-highlight-color:rgba(255,255,255,0); }
  body{
    .layui-layer-btn a{ font-size: 14px; }
    .layui-layer-btn .layui-layer-btn0{ background-color: #ca0029; border-color: #ca0029; }
  }
</style>

<style rel="stylesheet/scss" lang="scss">
  //单选
  .radio-inline{
    position: relative; vertical-align: top; padding-left: 20px; margin: 0;
    &:before{ content: ''; position: absolute; left: 0; width: 16px; height: 16px; border-radius: 50%; border: 1px solid #D8D8D8; top: 50%; margin-top: -8px; box-sizing: border-box; }
    input{ opacity: 0; position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
    &.active{
      &:after{
        content: ''; position: absolute; width: 8px; height: 8px; margin-top: -4px; left: 4px; border-radius: 50%; top: 50%; background: #ca0029;
      }
    }
  }
  /*checkbox勾选*/
  .protocol .radio-inline.active{
    &:after{ content: '\e637'; font-family: 'iconfont'; background: none; line-height: 1; font-weight: bold; width: 12px; height: 12px; left: 3px; margin-top: -4px; }
  }
  .drive-form{
    position: absolute; left: 0; top: 0; bottom: 0; right: 0; margin: auto; width: rem(620); height: rem(725); color: #000; text-align: left;
    .group{ height: rem(50); line-height: rem(50); margin-top: rem(40);
      > label{ float: left; font-size: rem(26); width: rem(170); vertical-align: top; margin: 0; }
      .rbox{ position: relative; float: right; width: rem(450);
        .form-control{ background-color: #fff; border: rem(2) solid #000; width: 100%; height: rem(50); padding: 0 rem(10); box-sizing: border-box; }
        select{ appearance:none; border-radius: 0; background: #fff; border: rem(2) solid #000; width: 100%; height: 100%; line-height: rem(50); padding: 0 rem(50) 0 rem(10); box-sizing: border-box; }
        .w50{ position: relative; width: 47%; float: left;
          &:last-child{ float: right; }
        }
        .icon-arrow-down{ position: absolute; right: 0; top: 0; width: rem(50); text-align: center; height: rem(50); line-height: rem(50); }
      }
      .gender-inline{ text-align: left;
        label{ width: rem(150); padding-left: rem(50); margin-right: rem(10); }
      }
      &.protocol{ font-size: rem(22); margin-top: rem(20);
        span{ color: #ca0029; text-decoration: underline; }
      }
    }

    .submit-btn{ display: block; margin: rem(40) auto 0; width: rem(283); height: rem(64); line-height: rem(64); text-align: center; font-size: rem(30); background: #c90329; color: #fff; }

    //隐私条款
    .policy_bg{
      position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 500; background: rgba(0,0,0,.8); display: none;
      .policy_wrap{
        position: absolute; left: 0; top: 0; right: 0; bottom: 0; padding: rem(60); margin: auto; width: rem(643); height: rem(870); background: #fff; box-sizing: border-box;
        ul,li,ol,p{ padding-left: 0; padding-right: 0; }
        .policy_content{
          overflow: auto; height: 100%; font-size: rem(20); line-height: rem(24); color: #000;
          .tit{ font-size: rem(36); color: #c90329; font-weight: bold; line-height: 1; }
          .des{ margin-top: rem(20);
            strong{ font-size: rem(24); color: #c90329; }
          }
        }
        .policy_close{ position: absolute; right: rem(10); top: rem(20); width: rem(50); height: rem(50); line-height: rem(50); text-align: center; font-size: rem(40); z-index: 1; }
      }
      &.active{ display: block; }
    }
  }
</style>

